<template>
    <div class="template" style="background-color: #F9EBC4;">
        <div style="background-color: #fff;overflow: hidden;padding: 0 20px;box-sizing: border-box;">
            <div class="nav" style="margin-bottom: 10px;">
                <img :src="back" style="width: 37px;" @click="router.back()"/>
                <img :src="ReviewIngredients" style="width: 212px;"/>
                <div style="width: 37px;"></div>
            </div>
        </div>
        <div class="look">
            <div v-for="(item, index) in  peiliao" :key="index" class="Lookitem">
                <div class="num">
                    <div class="aa">{{ item.num }}</div>
                </div>
                <div class="name">
                    <div class="aa">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { recipeList } from '../recipe'
import back from '../assets/back.png'
import ReviewIngredients from '../assets/ReviewIngredients.png'
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
const router = useRouter()
const route = useRoute()
let peiliao = ref([])
onMounted(() => {
    peiliao.value = route.query.type == 0 ? recipeList[route.query.id].ingredients : JSON.parse(localStorage.getItem('recipeList'))[route.query.id].ingredients
})

</script>
<style scoped>
.look {
    margin: 20px auto;
    width: 90vw;
    height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.Lookitem {
    width: 100%;
    height: 58px;
    padding: 0 22px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #013F4E;
}
.num {
    /* width: 150px; */
    width: 40%;
    word-wrap: break-word;
    margin-right: 10px;
}
.name {
    /* width: 250px; */
    width: 60%;
}
.aa {
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    word-wrap: break-word;
}
</style>